<template>
  <div class="aaa">
    <h1 class="pageName">path深度学习</h1>
    <svg id="svvg" style="width: 100%; height: 100%"></svg>
    <canvas id="cav"></canvas>
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  data: function () {
    return {
      svvg: null,
      refs: null,
      offset: 0,
    };
  },
  mounted() {
    this.svvg = d3.select("#svvg");
    this.refs = this.svvg.append("defs");

    this.showArc();
    this.showAlter();
  },
  methods: {
    // path生成元素特点:会自动闭合,默认填充黑色,宽度由路径向两侧膨胀
    // 参数
    // path.arc(x, y, radius, startAngle, endAngle, anticlockwise) //圆心坐标x,圆心坐标y,半径,开始角度(弧度制),结束角度,是否逆时针绘制(默认false顺时针)
    //line:x1,y1,x2,y2
    // 动态管线
    showAlter() {
      let g = this.svvg.append("g");
      let id = "myAlterBlocks"; //动态管线
      g.attr("id", id);
      //   alterBlocks

      let line1 = g
        .append("polyline")
        .attr("points", "0,0,300,30,12,500")
        .attr("fill", "none")
        .attr("style", "stroke:red")
        .attr("stroke-width", "4")
        .attr("stroke-linejoin", "round"); //每画五个像素空五个像素

      //dash模板
      //   let line2 = this.refs.append("g").attr("id", "dash");
      //   line2
      let line2 = g
        .append("polyline")
        .attr("id", "offsetLine")
        .attr("points", "0,0,300,30,12,500")
        .attr("style", "stroke:blue;")
        .attr("fill", "none")
        .attr("stroke-width", "4")
        .attr("stroke-dasharray", "15,15") //每画五个像素空五个像素
        .attr("stroke-linejoin", "round") //图形棱角或连线形状
        // .attr("stroke-linecap", "round") //线头线尾形状
        .attr("stroke-dashoffset", this.offset); //线头线尾形状
      console.log(line2);
      let rect = g.append("rect");

      let line3 = g
        .append("polyline")
        .attr("id", "offsetLine2")
        .attr("points", "0,0,300,30,12,500")
        .attr("style", "stroke:blue;")
        .attr("fill", "none")
        .attr("stroke-width", "4")
        .attr("stroke-dasharray", "15,15") //每画五个像素空五个像素
        .attr("stroke-linejoin", "round") //图形棱角或连线形状
        // .attr("stroke-linecap", "round") //线头线尾形状
        .attr("stroke-dashoffset", this.offset)
        .attr("transform", "rotate(180) translate(-500,-500)");

      this.setParameter(); //不停改变offset
    },
    setParameter() {
      let offsetLine = d3.select("#offsetLine");
      let offsetLine2 = d3.select("#offsetLine2");
      let that = this;

      let offseter = setInterval(function () {
        let time = new Date().getSeconds() * 8;
        console.log(time);
        that.offset = time;
        offsetLine.attr("stroke-dashoffset", that.offset);
        offsetLine2.attr("stroke-dashoffset", that.offset);
      }, 500);
    },
    // 弧线
    showArc() {
      let g = this.svvg.append("g");
      let id = "myarc"; //弧线
      g.attr("id", id);

      // 定义虚拟 DOM Path
      const myPath = d3.path();
      // myPath.moveTo(10, 10);
      // myPath.lineTo(50, 20);
      // myPath.quadraticCurveTo(60, 10, 70, 40);

      myPath.arc(30, 30, 30, 0, Math.PI / 2, true);
      //   console.log(myPath); //myPath是一个对象,包含路径关键点及生成的d路径字符串

      // 创建 path 元素并将虚拟 DOM Path 添加到 d 属性上
      const path = this.svvg
        .append("path")
        .attr("d", myPath.toString())
        .attr("stroke", "black")
        .attr("fill", "none")
        .attr("stroke-width", "3");

      g.append(() => path.node());
      let pathInfo = myPath.toString(); // "M40,0A40,40,0,1,1,-40,0A40,40,0,1,1,40,0"
      //   console.log(pathInfo);

      // 将 path 添加到 g 元素中
      g.append(() => path.node());
    },
  },
};
</script>

<style>
.aaa {
  width: 100%;
  height: 100%;
  background-color: #d58e8e;
}
</style>